<template>
	<div class="app-main">
		<el-card>
			<!-- tabs -->
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="数据概况" name="first">
					<!-- 第1行 -->
					<el-row class="chart-container">
						<!-- 收入分析 -->
						<IncomeAnalysis></IncomeAnalysis>
					</el-row>
					<!-- 第2行 -->
					<el-row :gutter="20" class="chart-container">
						<!-- 左 收入项目占比 -->
						<el-col :span="12">
							<IncomeAccount></IncomeAccount>
						</el-col>
						<!-- 右 收入方式占比 -->
						<el-col :span="12">
							<IncomePattern></IncomePattern>
						</el-col>
					</el-row>
					<!-- 第3行 -->
					<el-row class="chart-container">
						<!-- 支出分析 -->
						<ExpenditureAnalysis></ExpenditureAnalysis>
					</el-row>
					<!-- 第4行 -->
					<el-row class="chart-container" :gutter="20">
						<!-- 左 收入项目占比 -->
						<el-col :span="12">
							<ExpenditureAccount></ExpenditureAccount>
						</el-col>
						<!-- 右 收入方式占比 -->
						<el-col :span="12">
							<ExpenditurePattern></ExpenditurePattern>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="收支月统计" name="second">收支月统计</el-tab-pane>
			</el-tabs>
		</el-card>
	</div>
</template>

<script setup>
import { ref } from "vue";
import IncomeAnalysis from "@/components/content/data/financeData/IncomeAnalysis.vue"; // 收入分析
import IncomeAccount from "@/components/content/data/financeData/IncomeAccount.vue"; //收入项目占比
import IncomePattern from "@/components/content/data/financeData/IncomePattern.vue"; //收入方式占比

import ExpenditureAnalysis from "@/components/content/data/financeData/ExpenditureAnalysis.vue"; // 支出分析
import ExpenditureAccount from "@/components/content/data/financeData/ExpenditureAccount.vue"; //支出项目占比
import ExpenditurePattern from "@/components/content/data/financeData/ExpenditurePattern.vue"; //支出方式占比

//定义数据源

const activeName = ref("first");
</script>

<style lang="scss" scoped>
.app-main {
	min-height: calc(100vh - 50px);
	width: 97%;
	margin: 10px;
}

.chart-container {
	margin-bottom: 20px;
}
</style>
